<template>
    <view class="container">
        <view class="swiper-container">
            <uv-swiper :list="swiperList" height="600rpx" indicator indicatorMode="line" circular keyName="image" radius="0"></uv-swiper>
        </view>
        <view class="p-40">
            <view class="member-container">
                <view class="member">
                    <view class="member__info">
                        <image :src="userinfo.avatar" />
                        <view class="text">
                            <view class="name">
                                {{ userinfo.nickname }}
                                <span v-if="userinfo.id">(ID：{{ userinfo.id }})</span>
                            </view>
                            <view class="money">钱包余额：{{ userinfo.money }}</view>
                        </view>
                    </view>
                    <view class="member__qrcode">
                        <image src="/static/images/qrcode.png" @click="handleJump('UserQrcode')" />
                    </view>
                </view>
                <!-- <view class="member-data">
                    <view class="money">
                        <view class="value">40</view>
                        <view class="label">钱包余额</view>
                    </view>
                    <view style="color: #999">|</view>
                    <view class="score">
                        <view class="value">40</view>
                        <view class="label">会员积分</view>
                    </view>
                </view> -->
            </view>
            <view class="item">
                <view class="recharge" @click="handleJump('Recharge')">
                    <image src="/static/images/index/mcsb.png" class="mark-img"></image>
                    <view>储值</view>
                    <view class="right-img">
                        <image src="/static/images/index/mcsb_bg.png" mode="widthFix"></image>
                    </view>
                </view>
                <view class="score" @click="Toast('暂未开通')">
                    <image src="/static/images/index/hyjb.png" class="mark-img"></image>
                    <view>外卖</view>
                    <view class="right-img">
                        <image src="/static/images/index/hyjb_bg.png" mode="widthFix"></image>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>
<script lang="ts" setup>
import { useRequest } from 'alova';
import { handleJump } from '@/utils/common';
import { Toast } from '@/utils/uniapi/prompt';
import { useAuthStore } from '@/state/modules/auth';
import { data as homedata } from '@/services/api/index';

const authStore = useAuthStore();

const swiperList = ref([]);
onLoad(() => {
    getInit();
});
onShow(() => {
    if (authStore.isLogin) {
        getUserinfo();
    }
});

const { send: getData } = useRequest(homedata, { immediate: false });
const getInit = () => {
    getData().then((res) => {
        console.log(res);
        swiperList.value = res.banner;
    });
};
const userinfo = reactive({
    id: 0,
    avatar: '/static/images/avatar.png',
    nickname: '未登录',
    money: 0,
});
const getUserinfo = () => {
    if (authStore.isLogin) {
        authStore.getUserinfo().then((res) => {
            userinfo.id = res.id;
            userinfo.avatar = res.avatar;
            userinfo.nickname = res.nickname;
            userinfo.money = res.money;
        });
    }
};
</script>
<style lang="scss">
.swiper-container {
    position: relative;
    z-index: 2;
}
.member-container {
    width: 670rpx;
    padding: 40rpx;
    background-color: #fff;
    border-radius: 20rpx;
    margin-top: -90rpx;
    position: relative;
    z-index: 2;
    .member {
        display: flex;
        align-items: center;
        &__info {
            width: 510rpx;
            display: flex;
            align-items: center;
            image {
                width: 80rpx;
                height: 80rpx;
                border-radius: 50%;
            }
            .text {
                margin-left: 20rpx;
                font-size: 32rpx;
            }
            .name {
                font-size: 32rpx;
            }
            .money {
                margin-top: 10rpx;
                font-size: 24rpx;
            }
        }
        &__qrcode {
            width: 40rpx;
            margin-left: 30rpx;
            image {
                width: 40rpx;
                height: 40rpx;
            }
        }
    }
    .member-data {
        display: flex;
        align-items: center;
        margin-top: 10rpx;
        .money,
        .score {
            width: calc((100% - 30rpx) / 2);
            text-align: center;
            .label {
                color: #666;
                font-size: 24rpx;
            }
            .value {
                color: #121212;
                font-size: 36rpx;
            }
        }
    }
}
.item {
    display: flex;
    justify-content: space-between;
    margin-top: 30rpx;
    .recharge,
    .score {
        display: flex;
        width: calc((100% - 30rpx) / 2);
        padding: 40rpx;
        background-color: #fff;
        border-radius: 20rpx;
        font-size: 28rpx;
        color: #121212;
        .mark-img {
            width: 30rpx;
            height: 30rpx;
            margin-right: 10rpx;
        }
        .right-img {
            flex: 1;
            position: relative;
            margin-left: 20rpx;
            margin-right: -20rpx;
            margin-bottom: -20rpx;
            display: flex;
            align-items: flex-end;
            image {
                width: 100%;
            }
        }
    }
    .recharge {
        background-color: #fdf3f2;
    }
    .score {
        background-color: #fcf6d4;
    }
}
</style>
